import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { parsePrice } from '@utils/utils'
import basketSel from '@assets/tab-bar/basket-sel.png'
import './index.scss'

export default class HotSale extends Taro.Component {
    static defaultProps = {
        list: []
    }

    product(prod) {
        return (
            <View className='prod-items'>
                <View className='hot-imagecont'>
                    <Image src={prod.pic} className='hotsaleimg'></Image>
                </View>
                <View className='hot-text'>
                    <View className='hotprod-text'>{prod.prodName}</View>
                    <View className='prod-info'>{prod.brief}</View>
                    <View className='prod-text-info'>
                        <View className='price'>
                            <Text className='symbol'>￥</Text>
                            <Text className='big-num'>{parsePrice(prod.price)[0]}</Text>
                            <Text className='small-num'>.{parsePrice(prod.price)[1]}</Text>
                        </View>
                        {/* <View class='singal-price'>
                            <Text>￥</Text>
                            <Text>{prod.oriPrice}</Text>
                        </View> */}
                        <Image src={basketSel} className='basket-img' />
                    </View>
                </View>
            </View>
        )
    }

    productList(item) {
        const { title, prods } = item
        const prod = (prods || []).map(item => {
            return this.product(item)
        })
        return (
            <View>
                <View className='title'>
                    <Text>{title}</Text>
                    <View className='more-prod-cont'>
                        <Text className='more'>更多</Text>
                        <Text className='arrow'></Text>
                    </View>
                </View>
                <View className='hotsale-item-cont'>
                    {
                        prod
                    }
                </View>
            </View>
        )
    }

    render() {
        const { list } = this.props
        return (
            <View className='hot-sale'>
                {
                    this.productList(list)
                }
            </View>
        )
    }
}